<template>
  <div>
    <info-top :showExpend="true"></info-top>
    <div style="width:1200px;margin: 20px auto;">
      <top-tip :examTitle="examTitle" :batchTitle="batchTitle"></top-tip>
    </div>
    <div
      class="html-to-word"
      v-loading="loading"
      style="position: relative;width: 1200px;margin: 0 auto;"
    >
      <div
      ref="PrintsId"
        id="quesData_content"
        style="background: #fff;padding: 20px;width:880px;position: relative;overflow: hidden;"
      >
        <table
          style="border-collapse:collapse;border-spacing:0px;width:100%;"
          border="0"
          cellpadding="0"
          cellspacing="0"
        >
          <tr>
            <td style="border-style:none;width: 120px;" valign="top" v-if="linkShow && printShow">
              <div :style="{ top: 1438*(index-1) + 'px',position: 'absolute',Zindex: '100',left: '0',width: '80px',height: '1438px',marginRight: '8px'}" v-for="index in peintNum" :key="index">
                <div v-if="(index+1)%2 == 0">
                  <span
                    style="position: absolute;top: 30%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                  >分</span>
                  <span
                    style="position: absolute;top: 50%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                  >割</span>
                  <span
                    style="position: absolute;top: 70%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                  >线</span>
                  <span
                    style="position: absolute;right: 34px;top: 220px;transform: rotateZ(-90deg);transform-origin: right bottom;white-space: nowrap;font-size: 24px;color: #000000;"
                  >{{splitTitle}}</span>
                  <span
                    style="position: absolute;z-index: 200;right: 34px;top: 60px;transform: rotateZ(-90deg);transform-origin: right bottom;white-space: nowrap;font-size: 24px;"
                  >
                  </span>
                  <div
                    style="position: absolute;top: 0;height: 100%;border-right: 1px dashed #000;right: 20px;"
                  ></div>
                </div>
                <div v-else style="height: 1438px;line-height: 1438px;border-left: 1px solid #000;margin-left: 60px;"></div>
              </div>

            </td>
            <td style="border-style:none;width: 120px;" valign="top" v-else-if="linkShow">
              <div id="quesData_line" style="position: absolute;z-index:100;left: 0;top: 0;width: 80px;height: 842px;margin-right: 8px;">
                <span
                  style="position: absolute;top: 30%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                >分</span>
                <span
                  style="position: absolute;top: 50%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                >割</span>
                <span
                  style="position: absolute;top: 70%;right: 13px;color: #000;font-size: 14px;background-color: #fff;z-index: 1;"
                >线</span>
                <span
                  style="position: absolute;right: 34px;top: 220px;transform: rotateZ(-90deg);transform-origin: right bottom;white-space: nowrap;font-size: 24px;color: #000000;"
                >{{splitTitle}}</span>
                <span
                  style="position: absolute;z-index: 200;right: 34px;top: 60px;transform: rotateZ(-90deg);transform-origin: right bottom;white-space: nowrap;font-size: 24px;"
                >
                  <i class="iconfont icon-edit bianji" v-if="bianjiShow" @click.stop="setBianJi(3)">编辑</i>
                </span>
                <div
                  style="position: absolute;top: 0;height: 100%;border-right: 1px dashed #000;right: 20px;"
                ></div>
              </div>
            </td>
            <td
              style="border-style:none;width: 760px;"
              valign="top"
              ref="question_content"
              @click.self="setOff"
            >
              <div
                ref="question_content1"
                style="display: inline-block;width: 760px;margin-left: 10px;min-height: 1200px;"
              >
                <div
                  style="line-height: 60px;font-size: 34px;font-weight: bold;text-align: center;display:inline-block;width: 100%;margin: 0px 10px;"
                  v-if="steTitle"
                >
                  {{title}}
                  <i class="iconfont icon-edit bianji" @click.stop="setBianJi(1)">编辑</i>
                </div>
                <div style="text-align: center;" v-else>
                  <a-input style="width: 200px;" placeholder="请输入试卷名称" v-model="setTitle" />
                  <a-button type="primary" style="margin: 0 10px;" @click="setOn(1)">确定</a-button>
                  <a-button type="primary" @click="setOff(1)">取消</a-button>
                </div>
                <div v-if="dateBoxShow">
                  <div style="text-align: center;" v-if="dateShow">
                    {{dateTime}}
                    <i
                      class="iconfont icon-edit bianji"
                      v-if="setEdit"
                      @click.stop="setBianJi(4)"
                    >编辑</i>
                  </div>
                  <div style="text-align: center;margin-top:10px;" v-else>
                    <a-input style="width: 400px;" placeholder="请输入内容" v-model="setDateTime" />
                    <a-button type="primary" style="margin: 0 10px;" @click="setOn(4)">确定</a-button>
                    <a-button type="primary" @click="setOff(4)">取消</a-button>
                  </div>
                </div>
                <div v-if="stuBoxShow" style="margin-top: 15px;">
                  <div style="text-align: center;" v-if="stuShow">
                    {{stuTitle}}
                    <i
                      class="iconfont icon-edit bianji"
                      v-if="setEdit"
                      @click.stop="setBianJi(5)"
                    >编辑</i>
                  </div>
                  <div style="text-align: center;" v-else>
                    <a-input style="width: 400px;" placeholder="请输入内容" v-model="setStuTitle" />
                    <a-button type="primary" style="margin: 0 10px;" @click="setOn(5)">确定</a-button>
                    <a-button type="primary" @click="setOff(5)">取消</a-button>
                  </div>
                </div>
                <br v-if="totalScoreShow" />
                <div v-if="totalScoreShow" style="text-align: center;">
                  <table
                    style="border-collapse:collapse;border-spacing:0px;width: 100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                  >
                    <tr>
                      <th style="width: 30px;"></th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                      >题号</th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                        v-for="(ques,serial) in pointsQuesData"
                        :key="serial"
                      >{{backQuesNum[serial]}}</th>
                      <th style="width: 30px;"></th>
                    </tr>
                    <tr>
                      <th style="width: 30px;"></th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                      >得分</th>
                      <th
                        style="font-size: 14px;border: 1px solid #000;text-align: center;height:38px;line-height: 38px;"
                        v-for="(ques,serial) in pointsQuesData"
                        :key="serial"
                      ></th>
                      <th style="width: 30px;"></th>
                    </tr>
                  </table>
                </div>
                <br v-if="carefulShow" />
                <div style="font-size: 14px;" v-if="carefulShow">
                  <div>
                    *注意事项：
                    <i
                      class="iconfont icon-edit bianji"
                      v-if="setEdit1"
                      @click.stop="setBianJi(2)"
                    >编辑</i>
                    <div style="display:inline-block;" v-else>
                      <a-button type="primary" style="margin: 0 10px;" @click="setOn(2)">确定</a-button>
                      <a-button type="primary" style="margin: 0 10px;" @click="setOnAdd">添加</a-button>
                      <a-button type="primary" @click="setOff()">取消</a-button>
                    </div>
                  </div>
                  <div v-if="setEdit1">
                    <table
                      style="border-collapse:collapse;border-spacing:0px;width:100%;"
                      border="0"
                      cellpadding="0"
                      cellspacing="0"
                    >
                      <tr v-for="(item,index) in editTitle" :key="index">
                        <td style="border-style:none;width: 50px;" valign="top"></td>
                        <td style="border-style:none;width: 710px;" valign="top">
                          {{index+1}}.{{item}}。
                          <i
                            class="iconfont icon-delete bianji"
                            style="color: #f00;"
                            @click="offDelete(index)"
                          ></i>
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div v-else>
                    <div
                      v-for="(item,index) in setEditTitle"
                      :key="index"
                      style="margin-top: 10px;"
                    >
                      {{index+1}}.
                      <a-input
                        style="width: 80%;"
                        autoSize
                        placeholder="请输入注意事项"
                        v-model="setEditTitle[index]"
                      />
                    </div>
                  </div>
                </div>
                <br />
                <div style="text-align: center;padding-bottom: 20px;" v-if="!splitShow">
                  <a-input style="width: 400px;" placeholder="请输入侧边内容" v-model="setSplitTitle" />
                  <a-button type="primary" style="margin: 0 10px;" @click="setOn(3)">确定</a-button>
                  <a-button type="primary" @click="setOff(3)">取消</a-button>
                </div>
                <div v-for="(ques,serial) in pointsQuesData" :key="serial">
                  <div>
                    <div style="font-weight: bold;" v-if="pointsShow">
                      <table
                        style="border-collapse:collapse;border-spacing:0px;width:100%;"
                        border="0"
                        cellpadding="0"
                        cellspacing="0"
                      >
                        <tr v-if="quesScoreShow">
                          <th style="width:74px;border: 1px solid #000;text-align: center;">批阅人</th>
                          <th style="width:74px;border: 1px solid #000;text-align: center;"></th>
                          <td style="width:10px;"></td>
                          <td></td>
                        </tr>
                        <tr>
                          <th
                            style="width:74px;border: 1px solid #000;text-align: center;"
                            v-if="quesScoreShow"
                          >得分</th>
                          <th
                            style="width:74px;border: 1px solid #000;text-align: center;"
                            v-if="quesScoreShow"
                          ></th>
                          <td style="width:10px;" v-if="quesScoreShow"></td>
                          
                        </tr>
                      </table>
                      <div style="margin-top: 10px;">
                        <!-- <td> -->
                            {{backQuesNum[serial]}}、
                            <span v-if="ques.type == 1">单选题</span>
                            <span v-if="ques.type == 2">多选题</span>
                            <span v-if="ques.type == 3">判断题</span>
                            <span v-if="ques.type == 4 || ques.type == 5">填空题</span>
                            <span v-if="ques.type == 6">问答题</span>
                            <span v-if="ques.type == 7">匹配题</span>
                            <span v-if="ques.type == 8 || ques.type == 12">阅读理解</span>
                            <span v-if="ques.type == 9 || ques.type == 13">完形填空</span>
                            <span v-if="ques.type == 11">视听题</span>
                            <span
                              style="color: #5f5f5f;font-weight: initial;"
                            >（共{{ques.num}}题，共{{ques.Score}}分）</span>
                          <!-- </td> -->
                      </div>
                    </div>
                    <br />
                    <div
                      v-for="(item,index) in ques.data"
                      :key="index"
                      style="margin-bottom: 10px;"
                    >
                      <div v-html="fileQuestion(item,item.num)" style="display:inline-block;word-break: break-all;"></div>
                      <div v-if="item.QuestionType == 1 || item.QuestionType == 2">
                        <div v-if="!soleAnswerShow">
                          <div
                            style="margin-left: 15px;word-break: break-all;"
                            v-for="(Answer,key) in item.AnswerList"
                            :key="key"
                            v-html="fileAnswer(Answer,key)"
                          ></div>
                        </div>
                        <div v-if="!answerShow">参考答案：{{setQuesAnswer(item)}}</div>
                      </div>
                      <div v-if="item.QuestionType == 3">
                        <div v-if="!soleAnswerShow">
                          <div style="margin-left: 15px;">A、正确</div>
                          <div style="margin-left: 15px;">B、错误</div>
                        </div>
                        <div v-if="!answerShow">参考答案：{{setQuesAnswer(item)}}</div>
                      </div>
                      <div v-if="item.QuestionType == 4">
                        <div v-if="!soleAnswerShow">
                          <div
                            style="margin-left: 15px;margin-top: 5px;"
                            v-for="(exercise,key) in exerciseNum(item.AnswerList)"
                            :key="key"
                          >填空{{key+1}}:</div>
                        </div>
                        <div v-if="!answerShow" v-html="answerTitle"></div>
                        <table style="width: 100%;text-align: left;" v-if="!answerShow">
                          <tr v-for="(item1,num) in setQuesAnswer(item)" :key="num">
                            <td valign="top" style="width: 20px;"></td>
                            <td style="width: 686px;">
                              填空{{num+1}}：
                              <span style="color: #0177d5;">
                                <label v-if="!item1.Order[0].CaseSensitive">不</label>严格区分大小写
                              </span>
                              <table>
                                <tr v-for="(child,key) in item1.Order" :key="key">
                                  <td style="width: 50px;"></td>
                                  <td style="width: 606px;word-wrap: break-word;">
                                    {{key+1}}、{{child.Content}}
                                    <span
                                      style="margin-left: 10px;"
                                    >({{child.Percent}}%)</span>
                                  </td>
                                </tr>
                              </table>
                              <!-- <div
                                v-for="(child,key) in item1.Order"
                                  :key="key"
                                  style="width: 666px;word-wrap: break-word;"
                              >
                                {{key+1}}、{{child.Content}}
                                <span
                                  style="margin-left: 10px;"
                                >({{child.Percent}}%)</span>
                              </div> -->
                            </td>
                          </tr>
                        </table>
                        <table style="width: 100%;text-align: left;" v-if="!answerShow">
                          <tr>
                            <td valign="top" style="width: 85px;">顺序匹配：</td>
                            <td>
                              <span v-if="!item.IsOrderMatching">否</span>
                              <span v-else>是</span>
                            </td>
                          </tr>
                        </table>
                      </div>
                      <div v-if="item.QuestionType == 5">
                        <div v-if="!soleAnswerShow">
                          <div
                            style="margin-left: 15px;margin-top: 5px;"
                            v-for="(exercise,key) in item.AnswerList"
                            :key="key"
                          >填空{{key+1}}:</div>
                        </div>
                        <div v-if="!answerShow" v-html="answerTitle"></div>
                        <table style="width: 100%;text-align: left;" v-if="!answerShow">
                          <tr
                            v-for="(item1,num) in item.AnswerList"
                            :key="num"
                            style="word-wrap: break-word;"
                          >
                            <td valign="top" style="width: 74px;"></td>
                            <td>
                              <div
                                style="width: 680px;word-wrap: break-word;"
                              >填空{{num+1}}：{{item1.Content}}</div>
                            </td>
                          </tr>
                        </table>
                      </div>
                      <div v-if="item.QuestionType == 6">
                        <div v-if="!soleAnswerShow">
                          <br />
                          <br />
                          <br />
                          <br />
                        </div>
                        <div style="width: 100%;word-wrap: break-word;" v-if="!answerShow">
                          参考答案：
                          <span v-html="item.Answer"></span>
                        </div>
                      </div>
                      <div v-if="item.QuestionType == 7">
                        <div v-if="!soleAnswerShow">
                          <table
                            style="border-collapse:collapse;border-spacing:0px;width:100%;"
                            border="0"
                            cellpadding="0"
                            cellspacing="0"
                          >
                            <tr v-for="num in Math.ceil(item.AnswerList.length/2)" :key="num">
                              <td style="width: 15px;" valign="top"></td>
                              <td style="width: 350px;" valign="top">
                                <span v-html="fileAnswerq(item.AnswerList[(num-1)*2],(num-1)*2)"></span>
                              </td>
                              <td style="width: 15px;" valign="top"></td>
                              <td style="width: 15px;" valign="top"></td>
                              <td style="width: 350px;" valign="top">
                                <span
                                  v-html="fileAnswerq(item.AnswerList[(num-1)*2+1],(num-1)*2+1)"
                                  v-if="(num-1)*2+1 <= item.AnswerList.length-1"
                                ></span>
                              </td>
                              <td style="width: 15px;" valign="top"></td>
                            </tr>
                          </table>
                          <div style="height: 10px;">&nbsp;&nbsp;&nbsp;</div>
                          <table
                            style="border-collapse:collapse;border-spacing:0px;width:100%;"
                            border="0"
                            cellpadding="0"
                            cellspacing="0"
                          >
                            <tr v-for="num in Math.ceil(item.PiAnswer.length/2)" :key="num">
                              <td style="width: 15px;" valign="top"></td>
                              <td style="width: 350px;" valign="top">
                                <span v-html="fileAnswers(item.PiAnswer[(num-1)*2],(num-1)*2)"></span>
                              </td>
                              <td style="width: 15px;" valign="top"></td>
                              <td style="width: 15px;" valign="top"></td>
                              <td style="width: 350px;" valign="top">
                                <span
                                  v-html="fileAnswers(item.PiAnswer[(num-1)*2+1],(num-1)*2+1)"
                                  v-if="(num-1)*2+1 <= item.PiAnswer.length-1"
                                ></span>
                              </td>
                              <td style="width: 15px;" valign="top"></td>
                            </tr>
                          </table>
                        </div>
                        <div v-if="!answerShow">参考答案：{{setQuesAnswer(item)}}</div>
                      </div>
                      <div
                        v-if="item.QuestionType == 8 || item.QuestionType == 9 ||item.QuestionType == 11 || item.QuestionType == 12 || item.QuestionType == 13"
                      >
                        <div
                          v-for="(child,childAnswerIndex) in item.SubQuesList"
                          :key="childAnswerIndex"
                          style="margin-bottom: 10px;margin-left: 15px;"
                        >
                          <div
                            v-html="fileQuestionChild(child,childAnswerIndex)"
                            style="display:inline-block;word-break: break-all;"
                          ></div>
                          <div v-if="(child.SubQuestionType == 1 || child.SubQuestionType == 2)">
                            <div v-if="!soleAnswerShow">
                              <div
                                style="margin-left: 15px;word-break: break-all;"
                                v-for="(childAnswer,childkey) in child.AnswerList"
                                :key="childkey"
                                v-html="fileAnswer(childAnswer,childkey)"
                              ></div>
                            </div>
                            <div v-if="!answerShow">参考答案：{{setQuesAnswer(child)}}</div>
                          </div>
                          <div v-if="child.SubQuestionType == 3">
                            <div v-if="!soleAnswerShow">
                              <div style="margin-left: 15px;">A、正确</div>
                              <div style="margin-left: 15px;">B、错误</div>
                            </div>
                            <div v-if="!answerShow">参考答案：{{setQuesAnswer(child)}}</div>
                          </div>
                          <div v-if="child.SubQuestionType == 6 && !soleAnswerShow">
                            <div v-if="!soleAnswerShow">
                              <br />
                              <br />
                              <br />
                              <br />
                            </div>
                            <div style="width: 100%;word-wrap: break-word;" v-if="!answerShow">
                              参考答案：
                              <span v-html="child.Answer"></span>
                            </div>
                          </div>
                          <div style="width: 100%;word-wrap: break-word;" v-if="!answerShow">
                            答案解析:
                            <span v-html="item.ResultAnalysis || '暂无解析'"></span>
                          </div>
                        </div>
                      </div>
                      <div style="width: 100%;word-wrap: break-word;" v-if="!answerShow">
                        答案解析:
                        <span v-html="item.ResultAnalysis || '暂无解析'"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="to-doc-api">
        <div class="to-api-title">试卷调整</div>
        <a-select
          v-model="templateType"
          style="width: 100%;padding: 10px 20px;"
          @change="handleChange"
        >
          <a-select-option
            :value="item.type"
            v-for="(item,index) in template"
            :key="index"
          >{{item.title}}</a-select-option>
        </a-select>
        <div class="to-api-checked">
          <div class="to-checked-lis">
            <a-checkbox :checked="linkShow" @change="onChange(1)">分割线</a-checkbox>
          </div>
          <div class="to-checked-lis">
            <a-checkbox :checked="carefulShow" @change="onChange(2)">注意事项</a-checkbox>
          </div>
          <div class="to-checked-lis" style="width: 100%;">
            <a-checkbox :checked="stuBoxShow" @change="onChange(4)">考生信息填写</a-checkbox>
          </div>
          <div class="to-checked-lis" style="width: 100%;">
            <a-checkbox :checked="dateBoxShow" @change="onChange(3)">考试时间/总分</a-checkbox>
          </div>
        </div>
        <div class="border-checked"></div>
        <div class="to-api-checked">
          <div class="to-checked-lis" style="width: 100%;">
            <a-checkbox :checked="pointsShow" @change="onPointsShow(1)">
              分大题
              <span>(按题型进行分类)</span>
            </a-checkbox>
          </div>
          <div class="to-checked-lis">
            <a-checkbox
              :checked="totalScoreShow"
              :disabled="!pointsShow"
              @change="onPointsShow(2)"
            >总评分</a-checkbox>
          </div>
          <div class="to-checked-lis">
            <a-checkbox
              :checked="quesScoreShow"
              :disabled="!pointsShow"
              @change="onPointsShow(3)"
            >大题评分</a-checkbox>
          </div>
        </div>
        <div>
          <a-button style="margin-bottom: 10px;" v-if="answerShow" @click="setAnswer">插入答案和解析</a-button>
          <a-button style="margin-bottom: 10px;" v-else @click="setAnswer">取消答案和解析</a-button>
          <a-checkbox
            style="margin-bottom: 10px;padding: 0px 20px;"
            :checked="soleAnswerShow"
            v-if="!answerShow"
            @change="onSoleAnswerShow"
          >只显示答案解析（插入答案和解析后可使用）</a-checkbox>
        </div>
        <a-button type="primary" @click="prints" style="margin-right: 10px;">打印</a-button>
        <button ref="searchDom" v-print="'quesData_content'" v-show="false">打印</button>
        <a-button type="primary" @click="getFilesystem">DOCX导出</a-button>
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>如导出试卷显示不全，请将word的纸张大小设置为A3</span>
          </template>
          <a-icon
            type="question-circle"
            style="font-size: 24px;color: #f00;vertical-align: -6px;margin-left: 5px;"
          />
        </a-tooltip>
      </div>
      <img id="mathImg" :src="dataURL" alt style="display:none;" />
      <canvas
        id="canvas"
        width="320"
        height="240"
        style="display:none;position: absolute;z-index: -1000;bottom: -10000px;"
      ></canvas>
    </div>
  </div>
</template>

<script>
import { exportWord } from 'mhtml-to-word';
import baidu from 'baidu-template-pro';
import html2Canvas from 'html2canvas';
import infoTop from '@/components/info-top/index.vue';
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  components: {
    infoTop,
    topTip
  },
  mixins: [GetOperationList],
  data() {
    return {
      backQuesNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三'],
      template: [
        { type: 0, title: '简易模板' },
        { type: 1, title: '练习模板' },
        { type: 2, title: '正式试卷模板' },
        { type: 3, title: '自定义模板' }
      ],
      loading: false,
      quesData: [],
      pointsQuesData: [],
      templateType: 2,
      backQuesData: [],
      dataURL: '',
      mathImgList: [],
      file_system_url: '',
      title: '',
      setTitle: '',
      editTitle: [
        '答题时用2B铅笔在答题卡内正楷字体填写，答案请写在密封线内和试卷正面，否则不计分',
        '考生须独立完成答卷，不得讨论，不得传抄'
      ],
      setEditTitle: [],
      splitTitle: '姓名________ 班级________ 学号________',
      setSplitTitle: '',
      stuTitle: '姓名________ 班级________ 学号________',
      setStuTitle: '',
      dateTime: '(全卷满分: 100分，考试时间: 60分钟)',
      setDateTime: '',
      answerTitle: '参考答案：',
      splitShow: true,
      Progress: 0,
      bianjiShow: true,
      printShow: false,
      peintNum: 4,
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      steTitle: true,
      setEdit: true,
      setEdit1: true,
      dateShow: true,
      stuShow: true,
      //   配置项
      linkShow: true,
      carefulShow: true,
      dateBoxShow: true,
      stuBoxShow: false,
      pointsShow: true,
      totalScoreShow: false,
      quesScoreShow: false,
      partQuesShow: true,
      answerShow: true,
      soleAnswerShow: false,
      batchTitle: '',
      examTitle: ''
    };
  },
  props: {
    examid: {
      type: String,
      default: ''
    },
    batchid: {
      type: String,
      default: ''
    },
    structId: {
      type: String,
      default: ''
    }
  },
  watch: {
    soleAnswerShow() {
      setTimeout(() => {
        this.setImgCss();
      }, 500);
    },
    answerShow() {
      setTimeout(() => {
        this.setImgCss();
      }, 500);
    }
  },
  mounted() {
    this.onLineExamPreview();
    window.addEventListener('scroll', this.handleScroll);
    this.getOperation();
  },
  methods: {
    prints() {
      var dom = document.getElementsByClassName('bianji');
      let contentDom = document.getElementById('quesData_content');
      // contentDom.style.padding = '0px';
      let contentHeight = contentDom.offsetHeight;
      this.peintNum = Math.ceil(contentHeight/1438);
      contentDom.style.height = this.peintNum*1438+ 'px';
      this.printShow = true;
      for (let i = 0; i < dom.length; i++) {
        dom[i].style.display = 'none';
      };
      this.$refs.searchDom.click();
      setTimeout(() => {
        for (let i = 0; i < dom.length; i++) {
          dom[i].style.display = 'inline-block';
        };
        contentDom.style.padding = '20px';
        contentDom.style.height = 'auto'
        this.printShow = false;
      }, 1000);
    },
    getOperation() {
      this.loading = true;
      this.GetOperationList('examId', this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle;
          this.batchTitle = rst.batchTitle;
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    handleScroll() {
      var dom = document.activeElement;
      dom.blur();
    },
    fileQuestion(e, index) {
      var title = e.Title.replace(/p>/g, 'span>');
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      title = insertStr(title, 0, '<span>');
      title = insertStr(title, title.length, '</span>');
      var num = index + 1 + '、';
      var titles = insertStr(title, 6, num);
      if (e.QuestionType == 1 || e.QuestionType == 2 || e.QuestionType == 3) {
        let newNum = title.length + 3;
        let Score = `<span style="margin: 0px 5px;">(&nbsp;)</span>(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      } else if (
        e.QuestionType == 4 ||
        e.QuestionType == 5 ||
        e.QuestionType == 6 ||
        e.QuestionType == 7 ||
        e.QuestionType == 8
      ) {
        let newNum = title.length - 5;
        let Score = `(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      } else {
        let newNum = title.length - 4;
        let Score = `(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      }

      return titles;
    },
    handleChange(value) {
      if (value == 0) {
        this.linkShow = false;
        this.carefulShow = false;
        this.dateBoxShow = false;
        this.stuBoxShow = false;
        this.pointsShow = false;
        this.totalScoreShow = false;
        this.quesScoreShow = false;
      } else if (value == 1) {
        this.linkShow = false;
        this.carefulShow = true;
        this.dateBoxShow = false;
        this.stuBoxShow = true;
        this.pointsShow = false;
        this.totalScoreShow = false;
        this.quesScoreShow = false;
      } else if (value == 2) {
        this.linkShow = true;
        this.carefulShow = true;
        this.dateBoxShow = true;
        this.stuBoxShow = false;
        this.totalScoreShow = true;
        this.quesScoreShow = true;
      } else if (value == 3) {
        this.linkShow = false;
        this.carefulShow = false;
        this.dateBoxShow = false;
        this.stuBoxShow = false;
        this.pointsShow = false;
        this.totalScoreShow = false;
        this.quesScoreShow = false;
      }
    },
    fileQuestionChild(e, index) {
      var title = e.Title.replace(/p>/g, 'span>');
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      title = insertStr(title, 0, '<span>');
      title = insertStr(title, title.length, '</span>');
      var num = index + 1 + '、';
      var titles = insertStr(title, 6, num);
      if (e.SubQuestionType == 1 || e.SubQuestionType == 2 || e.SubQuestionType == 3) {
        let newNum = title.length - 5;
        let Score = `<span style="margin: 0px 5px;">(&nbsp;)</span>(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      } else {
        let newNum = title.length - 5;
        let Score = `(` + e.Score + `分)`;
        titles = insertStr(titles, newNum, Score);
      }
      return titles;
    },
    fileAnswer(e, key) {
      var title = e.Content.replace(/p>/g, 'span>');
      var num = this.Alphabet[key] + '、';
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var htmlP = title.substring(0, 6);
      if (htmlP != '<span>') {
        title = insertStr(title, 0, '<span>');
        title = insertStr(title, title.length, '</span>');
      }
      return insertStr(title, 6, num);
    },
    fileAnswerq(e, key) {
      var title = e.OptionContent.replace(/p>/g, 'span>');
      var num = key + 1 + '、';
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var htmlP = title.substring(0, 6);
      if (htmlP != '<span>') {
        title = insertStr(title, 0, '<span>');
        title = insertStr(title, title.length, '</span>');
      }
      return insertStr(title, 6, num);
    },
    fileAnswers(e, key) {
      var title = e.OptionAnswerContent.replace(/p>/g, 'span>');
      var num = this.Alphabet[key] + '、';
      let insertStr = (soure, start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start);
      };
      var htmlP = title.substring(0, 6);
      if (htmlP != '<span>') {
        title = insertStr(title, 0, '<span>');
        title = insertStr(title, title.length, '</span>');
      }
      return insertStr(title, 6, num);
    },
    exerciseNum(e) {
      var num = -1;
      for (let i = 0; i < e.length; i++) {
        if (num < e[i].SortOrder) {
          num = e[i].SortOrder;
        }
      }
      return num + 1;
    },
    // 获取考试数据
    onLineExamPreview() {
      this.$http
        .post('/api/design/marking/onLineExamPreview', {
          examId: this.examid,
          structId: this.structId
        })
        .then((rst) => {
          if (rst.code > 0) {
            this.title = rst.title;
            this.backQuesData = rst.list;
            this.quesData = rst.list;
            this.setQuesData();
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    setQuesData() {
      // 判断试卷有哪些题型
      var listType = [];
      for (let i = 0; i < this.backQuesData.length; i++) {
        this.backQuesData[i].num = i;
        listType.push(this.backQuesData[i].QuestionType);
      }
      // 题型类型去重
      listType = [...new Set(listType)];
      var list = [];
      for (let i = 0; i < listType.length; i++) {
        let lis = { type: listType[i], data: [], num: 0, Score: 0 };
        for (let key = 0; key < this.backQuesData.length; key++) {
          if (listType[i] == this.backQuesData[key].QuestionType) {
            lis.data.push(this.backQuesData[key]);
            lis.num++;
            lis.Score = lis.Score + this.backQuesData[key].Score;
          }
        }
        list.push(lis);
      }
      let quesData1 = [];
      let quesData2 = [];
      let quesData3 = [];
      let Score1 = 0;
      let Score2 = 0;
      let Score3 = 0;
      for (let i = 0; i < list.length; i++) {
        if (list[i].type == 4) {
          quesData1 = quesData1.concat(list[i].data);
          Score1 = Score1 + list[i].Score;
        } else if (list[i].type == 5) {
          quesData1 = quesData1.concat(list[i].data);
          Score1 = Score1 + list[i].Score;
          list.splice(i, 1);
        } else if (list[i].type == 8) {
          quesData2 = quesData2.concat(list[i].data);
          Score2 = Score2 + list[i].Score;
        } else if (list[i].type == 12) {
          quesData2 = quesData2.concat(list[i].data);
          Score2 = Score2 + list[i].Score;
          list.splice(i, 1);
        } else if (list[i].type == 9) {
          quesData3 = quesData3.concat(list[i].data);
          Score3 = Score3 + list[i].Score;
        } else if (list[i].type == 13) {
          quesData3 = quesData3.concat(list[i].data);
          Score3 = Score3 + list[i].Score;
          list.splice(i, 1);
        }
      }
      if (quesData1.length > 0) {
        let typeShow = true;
        for (let i = 0; i < list.length; i++) {
          if (list[i].type == 4) {
            typeShow = false;
          }
        }
        if (typeShow) {
          let lis = { type: 4, data: [] };
          list.push(lis);
        }
      }
      if (quesData2.length > 0) {
        let typeShow = true;
        for (let i = 0; i < list.length; i++) {
          if (list[i].type == 8) {
            typeShow = false;
          }
        }
        if (typeShow) {
          let lis = { type: 8, data: [] };
          list.push(lis);
        }
      }
      if (quesData3.length > 0) {
        let typeShow = true;
        for (let i = 0; i < list.length; i++) {
          if (list[i].type == 9) {
            typeShow = false;
          }
        }
        if (typeShow) {
          let lis = { type: 9, data: [] };
          list.push(lis);
        }
      }
      for (let i = 0; i < list.length; i++) {
        if (list[i].type == 4) {
          list[i].data = quesData1;
          list[i].Score = Score1;
        }
        if (list[i].type == 8) {
          list[i].data = quesData2;
          list[i].Score = Score2;
        }
        if (list[i].type == 9) {
          list[i].data = quesData3;
          list[i].Score = Score3;
        }
      }
      var num = -1;
      for (let i = 0; i < list.length; i++) {
        for (let key = 0; key < list[i].data.length; key++) {
          num += 1;
          list[i].data[key].num = num;
        }
      }
      this.pointsQuesData = list;
      setTimeout(() => {
        this.setImgCss();
      }, 500);
    },
    setImgCss() {
      this.loading = true;
      var dom = document.getElementsByTagName('img');
      for (let i = 0; i < dom.length; i++) {
        // dom[i].style.maxWidth = '100%';
        let domWidth = dom[i].width;
        let domHeight = dom[i].height;
        if (dom[i].width > 500) {
          dom[i].width = 500;
          dom[i].height = 500/domWidth*domHeight;
        }
      }
      this.loading = false;
    },
    getFilesystem() {
      window.scrollTo(0, 0);
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      var dom = document.getElementsByClassName('bianji');
      for (let i = 0; i < dom.length; i++) {
        dom[i].style.display = 'none';
      }
      this.loading = true;
      this.$http.post('/api/common/accounts/getManagerInfo').then((res) => {
        if (res.code > 0) {
          this.file_system_url = res.file_system_url;
          setTimeout(() => {
            this.exportData();
          }, 1000);
        } else {
          this.$message.error(res.msg);
          this.loading = false;
        }
      });
    },
    exportData() {
      var math = document.getElementsByClassName('kfformula');
      var canvas = document.getElementById('canvas');
      var num = math.length;
      if (math.length > 0) {
        for (let i = 0; i < math.length; i++) {
          this.setOssMath(math[i], num);
        }
      } else {
        this.setLine();
        this.loading = false;
      }
    },
    setOssMath(dom, num) {
      var canvas = document.createElement('canvas');
      if (dom.clientHeight > 0 && dom.clientWidth > 0) {
        let urlArr = dom.src.split(',');
        let base64 = urlArr[1];
        let imgType = urlArr[0].replace('data:image/', '').replace(';base64', '');
        let file_system_url = this.file_system_url;
        let postUrl = `${file_system_url}&extension=${imgType}&encode=base64`;

        this.$http.post(postUrl, base64).then((data) => {
          let mathImg = document.createElement('img');
          mathImg.src = data.ossOriUrl;
          var node = dom.parentNode;
          node.appendChild(mathImg);
          node.replaceChild(mathImg, dom);
          this.Progress++;
          if (this.Progress == num) {
            this.setLine();
            this.loading = false;
          }
        });
      } else {
        this.Progress++;
        if (this.Progress == num) {
          this.setLine();
          this.loading = false;
        }
      }
    },
    setLine() {
      if (!this.linkShow) {
        setTimeout(() => {
          this.exportWord();
        }, 1000);
      } else {
        this.loading = true;
        var dom = document.getElementById('quesData_line');
        var canvas = document.createElement('canvas');
        html2Canvas(dom, { useCORS: true })
          .then((canvas) => {
            let imgUrl = canvas.toDataURL('image/png');
            var imgDom = document.createElement('img');
            imgDom.src = imgUrl;
            this.firstFlag = false;
            canvas.getContext('2d').drawImage(imgDom, 0, 0, 320, 240);
            //执行上传
            let completeUrl = canvas.toDataURL('image/png');
            let urlArr = completeUrl.split(',');
            let base64 = urlArr[1];
            let imgType = urlArr[0].replace('data:image/', '').replace(';base64', '');
            let file_system_url = this.file_system_url;
            let postUrl = `${file_system_url}&extension=${imgType}&encode=base64`;
            var node = dom.parentNode;
            this.$http.post(postUrl, base64).then((data) => {
              let mathImg = document.createElement('img');
              mathImg.src = data.ossOriUrl;
              let quesDom = document.getElementById('quesData_content');
              // var lineNum = Math.ceil(quesDom.offsetHeight / 842);
              // var frag = document.createElement('div');
              // var lisHtml = `<img src="` + data.ossOriUrl + `" />`;
              // var imgHtml = ``;
              // imgHtml = lisHtml;
              // // for (var i = 0; i < lineNum + 1; i++) {
              // //   imgHtml = imgHtml + lisHtml;
              // // }
              // frag.innerHTML = imgHtml;
              node.appendChild(mathImg);
              node.replaceChild(mathImg, dom);
              setTimeout(() => {
                this.exportWord();
                this.loading = false;
              }, 1000);
            });
          })
          .catch((error) => {});
      }
    },
    exportWord() {
      var data = { quesData: this.quesData[0].Title, title: this.title };
      var html = baidu.template('quesData_content', data);
      exportWord({
        mhtml: html,
        data: { title: this.title },
        filename: this.title,
        style: 'p{display: inline-block;}img{max-width: calc(100% - 50px);;vertical-align: top;}'
      });
      this.$router.go(0);
    },
    setOff(type) {
      this.steTitle = true;
      this.setEdit = true;
      this.setEdit1 = true;
      this.splitShow = true;
      this.dateShow = true;
      this.stuShow = true;
      if (type != 2) {
        this.editTitle = JSON.parse(localStorage.getItem('editTitle'));
      }
    },
    setOn(type) {
      if (type == 1) {
        this.title = this.setTitle;
      } else if (type == 2) {
        this.editTitle = this.setEditTitle;
        localStorage.setItem('editTitle', JSON.stringify(this.editTitle));
      } else if (type == 3) {
        this.splitTitle = this.setSplitTitle;
      } else if (type == 4) {
        this.dateTime = this.setDateTime;
      } else if (type == 5) {
        this.stuTitle = this.setStuTitle;
      }
      this.setOff(type);
    },
    setBianJi(type) {
      if (type == 1) {
        this.steTitle = false;
        this.setTitle = this.title;
      } else if (type == 2) {
        this.setEdit1 = false;
        localStorage.setItem('editTitle', JSON.stringify(this.editTitle));
        this.setEditTitle = this.editTitle;
      } else if (type == 3) {
        this.splitShow = false;
        this.setSplitTitle = this.splitTitle;
      } else if (type == 4) {
        this.dateShow = false;
        this.setDateTime = this.dateTime;
      } else if (type == 5) {
        this.stuShow = false;
        this.setStuTitle = this.stuTitle;
      } else {
        this.$message('暂无添加配置');
      }
    },
    setOnAdd() {
      var lis = '';
      this.setEditTitle.push(lis);
    },
    offDelete(index) {
      var list = this.setEditTitle;
      this.editTitle.splice(index, 1);
    },
    onChange(type) {
      this.templateType = 3;
      if (type == 1) {
        if (this.linkShow) {
          this.$refs.question_content.style.width = '880px';
          this.$refs.question_content1.style.width = '840px';
        } else {
          this.$refs.question_content.style.width = '760px';
          this.$refs.question_content1.style.width = '760px';
        }
        this.linkShow = !this.linkShow;
      } else if (type == 2) {
        this.carefulShow = !this.carefulShow;
      } else if (type == 3) {
        this.dateBoxShow = !this.dateBoxShow;
      } else if (type == 4) {
        this.stuBoxShow = !this.stuBoxShow;
      }
    },
    onPointsShow(type) {
      this.templateType = 3;
      if (type == 1) {
        this.pointsShow = !this.pointsShow;
        if (this.pointsShow == false) {
          this.totalScoreShow = false;
          this.quesScoreShow = false;
        }
      } else if (type == 2) {
        this.totalScoreShow = !this.totalScoreShow;
      } else if (type == 3) {
        this.quesScoreShow = !this.quesScoreShow;
      }
    },
    setAnswer() {
      if (this.answerShow) {
        this.answerShow = false;
        this.soleAnswerShow = false;
      } else {
        this.answerShow = true;
        this.soleAnswerShow = false;
      }
    },
    onSoleAnswerShow() {
      this.soleAnswerShow = !this.soleAnswerShow;
    },
    setQuesAnswer(item) {
      if (item.QuestionType == 1 || item.QuestionType == 3 || item.SubQuestionType == 1 || item.SubQuestionType == 3) {
        return this.Alphabet[Number(item.Answer)];
      } else if (
        item.QuestionType == 2 ||
        item.QuestionType == 7 ||
        item.SubQuestionType == 2 ||
        item.SubQuestionType == 7
      ) {
        let answerList = item.Answer.split(',').map(Number);
        let answer = '';
        for (let i = 0; i < answerList.length; i++) {
          if (i == 0) {
            answer = answer + this.Alphabet[answerList[i]];
          } else {
            answer = answer + ',' + this.Alphabet[answerList[i]];
          }
        }
        return answer;
      } else if (item.QuestionType == 4) {
        return this.setAnswerList(item.AnswerList);
      }
    },
    setAnswerList(e) {
      var answer = [];
      let num = -1;
      for (let index = 0; index < e.length; index++) {
        let key = e[index].SortOrder;
        if (num < key) {
          num = key;
          var list = {
            Order: [
              {
                SortOrder: e[index].SortOrder,
                Content: e[index].Content,
                Percent: e[index].Percent,
                CaseSensitive: e[index].CaseSensitive
              }
            ]
          };
          answer.push(list);
        } else {
          let lis = {
            SortOrder: e[index].SortOrder,
            Content: e[index].Content,
            Percent: e[index].Percent,
            CaseSensitive: e[index].CaseSensitive
          };
          answer[key].Order.push(lis);
        }
      }
      return answer;
    }
  }
};
</script>
<style>
</style>